﻿<%@ Page Title="Como Llegar" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="ComoLlegar.aspx.cs" Inherits="HotelBrisayArena.ComoLlegar" %>

   
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen" title="html5doctor.com Reset Stylesheet"/>
<link rel="stylesheet" type="text/css" href="../css/css3.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../css/general.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../css/grid.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../css/afdemos.css" media="screen"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="../js/jquery2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>

<style type="text/css">
.titulo {
	color: #FFF;
}
.titulo {
	color: #FFF;
}
.cuerpo {
	color: #FFF;
}
.cuerpo {
	color: #FFF;
}
.cuerpo {
	color: #FFF;
}
.cuerpo {
	color: #FFF;
}
.titulo {
	color: #FFF;
}
.titulo p a {
	color: #80FFFF;
}
.cuerpo {
	color: #FFF;
}
    .style5
    {
        color: #FFF;
        width: 269px;
    }
    .style6
    {
        width: 269px;
    }
    .style7
    {
        width: 123px;
    }
    .style9
    {
        color: #FFF;
        width: 90px;
    }
    .style10
    {
        color: #000000;
        text-align: left;
    }
    .style11
    {
        width: 90px;
    }
    .style12
    {
        width: 9px;
    }
</style>

<script type="text/javascript">

    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var map;
    $(document).ready(function () {
        load_map();
    });
	
    function load_map() {
        var myLatlng = new google.maps.LatLng(9.61667, -84.63333);
        var myOptions = {
            zoom: 15,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($("#map_canvas").get(0), myOptions);

        var contentString = '<div id="div_ejemplo">' +
            '<p><b>Hotel Brisa y Arena</b><br><br> ' +
            'Address: Calle Europa n: 20<br> ' +
            'Jaco - Costa Rica.<br>' +
            'Tel: (506) 5789 6524<br></p>' +
            '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 200
        });

        var marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            title: 'Hotel Brisa y Arena'
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    function rockAndRoll() {
        var request = {
            origin: $('#origen').val(),
            destination: $('#destino').val(),
            travelMode: google.maps.DirectionsTravelMode[$('#modo_viaje').val()],
//            unitSystem: google.maps.DirectionsUnitSystem[$('#tipo_sistema').val()],
            provideRouteAlternatives: true
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel($("#panel_ruta").get(0));
                directionsDisplay.setDirections(response);
            } else {
                alert("No existen rutas entre ambos puntos");
            }
        });
    }

    $('#buscar').live('click', function () {
        rockAndRoll();
    });

    $('.opciones_ruta').live('change', function () {
        rockAndRoll();
    });
</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div class="post">
<h2 class="title"> ¿Cómo llegar a nuestro hotel?</h2>
<div style="clear: both;"></div>

<p><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></p>
</div>

<table align="left" style="height: 500px; width: 633px">
  <tr>
    <th colspan="4" class="titulo" scope="col"><h3><strong>Ubicación del Hotel Brisa y 
        Arena</strong></h3>
        <p>&nbsp;</p></th>
  </tr>
  <tr>
    <td colspan="3">
    <div id="map_canvas" style="width:650px; height:493px"></div>
    </td>
  </tr>
  <tr>
    <td class="style11">&nbsp;</td>
    <td class="style12">&nbsp;</td>
    <td class="style6">&nbsp;</td>
    <td class="style7">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" class="titulo"><div align="center">
      <h3>Calcular distancias entre 2 puntos del mapa</h3>
    </div>
        <div align="center">
            <p>&nbsp;</p>
    </div></td>
  </tr>
  <tr>
    <td class="style9"><div class="style10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Punto Origen:</div></td>
    <td class="style12"><div align="center" class="align_left">
      <input type="text" name="origen" id="origen" placeholder="calle, ciudad, estado..." />
    </div></td>
    <td class="style5"><div class="style10">Modo de viaje:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select name="modo_viaje" class="opciones_ruta" id="modo_viaje">
        <option value="DRIVING" selected="selected">Auto</option>
        <option value="WALKING">Caminando</option>
      </select></div></td>
    <td class="style7"><div align="center">
      &nbsp;</div></td>
  </tr>
    <tr>
    <td><label for="destino" class="cuerpo">
      <div align="center" class="cuerpo">Punto Destino</div>
    </label></td>
    <td><div align="center">
      <input type="text" name="destino" id="destino" value="Hotel la palmera, jaco, puntarenas, costa rica" style="visibility: hidden" />
    </div></td>
    <td class="cuerpo"><div align="center">Tipo de Mapa:<select name="tipo_sistema" 
            class="opciones_ruta" id="tipo_sistema" style="visibility: hidden" >
        <option value="METRIC" selected="selected">Métrico</option>
        <option value="IMPERIAL">Imperial</option>
      </select></div></td>
    <td><div align="center">
      &nbsp;</div></td>
  </tr>
  <tr>
    <td class="style7">&nbsp;</td>
  </tr>
  <tr>
    <td class="style11">&nbsp;</td>
    <td class="style12">&nbsp;</td>
    <td class="style6">&nbsp;</td>
    <td class="style7">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><div align="center">
      <input type="button" id="buscar" value="Buscar ruta" />
    </div></td>
  </tr>
  <tr>
    <td colspan="4">
        <br />
        <div align="center" id="panel_ruta" 
            style=" float:inherit; background-color:#FFF; overflow: auto; width:650px; height: auto"></div>
        <br />
      </td>
  </tr>
  <tr>
    <td colspan="4"><div id="rutaOps"></div></td>
  </tr>
</table>

</asp:Content>

